@charset "utf-8";
@import "common";
@mixin time-span {
    color: $icon-color;
    span {
        &:first-of-type {
            font-size: r(19.53px);
        }
        &:nth-of-type(2) {
            font-size: r(21.31px);
        }
    }
}

.head-banner {
    position: relative;
    width: r(640px);
    height: r(305px);
    background-image: url(../images/banner.jpg);
    background-size: r(640px) r(305px);
    //  >img {
    //      display: block;
    //      width: r(640px);
    //      height: r(305px);
    //  }
    .mask {
        bottom: 0;
        position: absolute;
        width: r(640px);
        height: r(104px);
        background: rgba(0, 0, 0, 0.5);
        >p {
            font-size: r(26.63px);
            color: white;
            text-align: center;
            margin-top: r(23px);
        }
        .heart {
            font-size: 0;
            margin: {
                top: r(11px);
                bottom: r(13px);
                right: r(49px);
                left: r(31px);
            }
            color: white;
            .heart-icon {
                font-size: r(18px);
                margin-right: r(6px);
                vertical-align: middle;
            }
            >span {
                font-size: r(17.76px);
                vertical-align: middle;
            }
        }
        .view {
            font-size: 0;
            margin: {
                top: r(8px);
                bottom: r(13px);
                right: r(96px);
            }
            color: white;
            .icon-view {
                font-size: r(23px);
                margin-right: r(6px);
                vertical-align: middle;
            }
            >span {
                font-size: r(17.76px);
                vertical-align: middle;
            }
        }
        .point {
            margin-top: r(11px);
            width: r(79px);
            height: r(11px);
            ul li {
                float: left;
                color: rgba(255, 255, 255, 0.5);
                font-size: r(26px);
                margin-left: r(15px);
                &:first-of-type {
                    color: rgba(255, 0, 0, 0.5);
                }
            }
        }
        .date {
            margin-top: r(11px);
            margin-right: r(21px);
            width: r(175px);
            height: r(20px);
            font-size: 0;
            span {
                font-size: r(17.76px);
                color: white;
            }
        }
    }
}

section {
    width: r(640px);
    height: r(1563px);
    background: #f5f5f5;
    margin-bottom: r(96px);
    .new1 {
        margin-bottom: r(25px);
        width: r(640px);
        height: r(334px);
        background: white;
        .new-item1 {
            width: r(582px);
            height: r(135px);
            border-bottom: 1px solid #e7e7e7;
            padding-top: r(31px);
            font-size: 0;
            >p {
                display: inline-block;
                font-size: r(24.86px);
                width: r(325px);
                height: r(58px);
                color: black;
            }
            >img {
                float: right;
                width: r(208px);
                height: r(116px);
            }
            .heart {
                color: $icon-color;
                .heart-icon {
                    font-size: r(18px);
                    margin-right: r(6px);
                }
                >span {
                    font-size: r(17.76px);
                }
                margin: {
                    top: r(28px);
                }
            }
            .time {
                width: r(176px);
                margin: {
                    top: r(20px);
                    left: r(80px);
                }
                @include time-span;
            }
        }
        .new-item2 {
            width: r(582px);
            height: r(116px);
            padding-top: r(20px);
            font-size: 0;
            >p {
                display: inline-block;
                font-size: r(24.86px);
                width: r(325px);
                height: r(58px);
                color: black;
            }
            >img {
                float: right;
                width: r(208px);
                height: r(116px);
            }
            .heart {
                color: $icon-color;
                .heart-icon {
                    font-size: r(18px);
                    margin-right: r(6px);
                }
                >span {
                    font-size: r(17.76px);
                }
                margin: {
                    top: r(28px);
                }
            }
            .time {
                width: r(176px);
                margin: {
                    top: r(20px);
                    left: r(80px);
                }
                @include time-span;
            }
        }
    }
    .main-new {
        background: white;
        width: r(640px);
        //      height: r(1145px);
        padding-top: r(33px);
        .big-title-new {
            font-size: 0;
            width: r(581px);
            height: r(208px);
            .title-new-img {
                >img {
                    width: r(185px);
                    height: r(123px);
                    margin-right: r(13px);
                    &:nth-of-type(3) {
                        margin-right: 0px;
                    }
                }
            }
            >p {
                font-size: r(24.86px);
                padding: {
                    bottom: r(16px);
                }
            }
            .author {
                width: r(583px);
                height: r(27px);
                margin-top: r(11px);
                li {
                    float: left;
                }
                .person {
                    margin-right: r(17px);
                    >img {
                        margin-right: r(9px);
                        width: r(26px);
                        height: r(26px);
                        vertical-align: middle;
                    }
                    >span {
                        font-size: r(19.53px);
                        color: $icon-color;
                        vertical-align: middle;
                    }
                }
                .pinglun {
                    margin-right: r(21px);
                    color: $icon-color;
                    .icon-pinglun {
                        font-size: r(24px);
                        margin-right: r(6px);
                    }
                    span {
                        font-size: r(15.98px);
                    }
                }
                .heart {
                    margin-right: r(150px);
                    color: $icon-color;
                    .heart-icon {
                        font-size: r(22px);
                        margin-right: r(6px);
                    }
                    span {
                        font-size: r(15.98px);
                    }
                }
                .time {
                    @include time-span;
                }
            }
        }
        .new2 {
            width: r(640px);
            height: r(314px);
            .new-item1 {
                width: r(582px);
                height: r(135px);
                border-bottom: 1px solid #e7e7e7;
                padding-top: r(31px);
                font-size: 0;
                >p {
                    display: inline-block;
                    font-size: r(24.86px);
                    width: r(325px);
                    height: r(58px);
                    color: black;
                }
                >img {
                    float: right;
                    width: r(208px);
                    height: r(116px);
                }
                .heart {
                    color: $icon-color;
                    .heart-icon {
                        font-size: r(18px);
                        margin-right: r(6px);
                    }
                    >span {
                        font-size: r(17.76px);
                    }
                    margin: {
                        top: r(28px);
                    }
                }
                .time {
                    width: r(231px);
                    margin: {
                        top: r(20px);
                        left: r(50px);
                    }
                    @include time-span;
                }
            }
            .new-item2 {
                width: r(582px);
                height: r(116px);
                padding-top: r(20px);
                font-size: 0;
                >p {
                    display: inline-block;
                    font-size: r(24.86px);
                    width: r(325px);
                    height: r(58px);
                    color: black;
                }
                >img {
                    float: right;
                    width: r(208px);
                    height: r(116px);
                }
                .heart {
                    color: $icon-color;
                    .heart-icon {
                        font-size: r(18px);
                        margin-right: r(6px);
                    }
                    >span {
                        font-size: r(17.76px);
                    }
                    margin: {
                        top: r(28px);
                    }
                }
                .time {
                    width: r(231px);
                    margin: {
                        top: r(20px);
                        left: r(50px);
                    }
                    @include time-span;
                }
            }
        }
        .big-title-new2 {
            margin-top: r(33px);
            font-size: 0;
            width: r(581px);
            height: r(208px);
            .title-new-img {
                >img {
                    width: r(185px);
                    height: r(123px);
                    margin-right: r(13px);
                    &:nth-of-type(3) {
                        margin-right: 0px;
                    }
                }
            }
            >p {
                font-size: r(24.86px);
                padding: {
                    bottom: r(16px);
                }
            }
            .author {
                width: r(583px);
                height: r(27px);
                margin-top: r(11px);
                li {
                    float: left;
                }
                .person {
                    margin-right: r(17px);
                    >img {
                        margin-right: r(9px);
                        width: r(26px);
                        height: r(26px);
                        vertical-align: middle;
                    }
                    >span {
                        font-size: r(19.53px);
                        color: $icon-color;
                        vertical-align: middle;
                    }
                }
                .pinglun {
                    margin-right: r(21px);
                    color: $icon-color;
                    .icon-pinglun {
                        font-size: r(24px);
                        margin-right: r(6px);
                    }
                    span {
                        font-size: r(15.98px);
                    }
                }
                .heart {
                    margin-right: r(150px);
                    color: $icon-color;
                    .heart-icon {
                        font-size: r(22px);
                        margin-right: r(6px);
                    }
                    span {
                        font-size: r(15.98px);
                    }
                }
                .time {
                    @include time-span;
                }
            }
        }
        .new3 {
            width: r(640px);
            height: r(344px);
            .new-item1 {
                width: r(582px);
                height: r(135px);
                border-bottom: 1px solid #e7e7e7;
                padding-top: r(31px);
                font-size: 0;
                >p {
                    display: inline-block;
                    font-size: r(24.86px);
                    width: r(325px);
                    height: r(58px);
                    color: black;
                }
                >img {
                    float: right;
                    width: r(208px);
                    height: r(116px);
                }
                .heart {
                    color: $icon-color;
                    .heart-icon {
                        font-size: r(18px);
                        margin-right: r(6px);
                    }
                    >span {
                        font-size: r(17.76px);
                    }
                    margin: {
                        top: r(28px);
                    }
                }
                .time {
                    width: r(231px);
                    margin: {
                        top: r(20px);
                        left: r(50px);
                    }
                    @include time-span;
                }
            }
            .new-item2 {
                width: r(582px);
                height: r(116px);
                padding-top: r(20px);
                font-size: 0;
                >p {
                    display: inline-block;
                    font-size: r(24.86px);
                    width: r(325px);
                    height: r(58px);
                    color: black;
                }
                >img {
                    float: right;
                    width: r(208px);
                    height: r(116px);
                }
                .heart {
                    color: $icon-color;
                    .heart-icon {
                        font-size: r(18px);
                        margin-right: r(6px);
                    }
                    >span {
                        font-size: r(17.76px);
                    }
                    margin: {
                        top: r(28px);
                    }
                }
                .time {
                    width: r(231px);
                    margin: {
                        top: r(20px);
                        left: r(50px);
                    }
                    @include time-span;
                }
            }
        }
    }
    .loadmore-contain {
        width: r(640px);
        height: r(59px);
        background: white;
        .loadmore {
            width: r(581px);
            height: r(59px);
            font-size: 0;
            text-align: center;
            line-height: r(59px);
            border-top: 1px solid #e7e7e7;
            span {
                font-size: r(22px);
                color: $icon-color;
            }
        }
    }
}

.tabbar {
    width: r(640px);
    position: fixed;
    bottom: 0;
    background: #f5f5f5;
    font-size: 0;
    div {
        float: left;
        width: r(127.2px);
        height: r(96px);
        position: relative;
        text-align: center;
        margin-top: r(10px);
        >p {
            font-size: r(17.76px);
            color: #8b8b8b;
        }
        >.iconfont {
            color: #8b8b8b;
            font-size: r(50px);
        }
        &:hover>.iconfont {
            color: red;
        }
        &:hover>p {
            color: red;
        }
    }
    .shouye,
    .tabar_logo,
    .wenzhang,
    .ziyuan {
        &::after {
            content: '';
            position: absolute;
            left: auto;
            top: auto;
            bottom: r(21px);
            right: 0;
            height: 55%;
            width: r(1px);
            background-color: #e7e7e7;
        }
    }
}

.wrap-user {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    transform: translateX(-100%);
    top: r(0px);
}

$user-font-color:#7f7f7f;
ul li {
    list-style: none;
}

.section {
    width: r(640px);
    background: #303030;
}

.header {
    background: #222222;
    width: r(640px);
    height: r(89px);
}



.section-user {
    font-size: 0;
    background: #222222;
    width: r(640px);
    height: r(360px);
    margin-bottom: r(23px);
    .user-contain {
        position: relative;
        width: r(580px);
        height: r(325px);
        padding-top: r(35px);
        .user-img {
            margin: 0 auto;
            width: r(130px);
            height: r(130px);
            border-radius: 50%;
            overflow: hidden;
            >img {
                width: r(130px);
                height: r(130px);
            }
        }
        .red-num {
            position: absolute;
            width: r(33px);
            height: r(33px);
            background: red;
            border-radius: 50%;
            overflow: hidden;
            text-align: center;
            line-height: r(33px);
            left: r(325px);
            span {
                font-size: r(20.69px);
                color: white;
            }
        }
        .user-detail {
            margin: r(15px) auto;
            width: r(194px);
            height: r(95px);
            color: white;
            >span {
                font-size: r(24.86px);
                margin-left: r(7px);
            }
            .concer {
                float: right;
                width: r(92px);
                height: r(20px);
                border: 1px white solid;
                line-height: r(20px);
                text-align: center;
                margin: {
                    top: r(5px);
                }
                >span {
                    font-size: r(14.2px);
                }
            }
            .star-icon {
                width: r(124px);
                height: r(20px);
                margin: {
                    top: r(4px);
                    left: r(40px);
                    bottom: r(9px);
                }
                .icon-star {
                    float: left;
                    font-size: r(24px);
                    list-style: none;
                    color: yellow;
                    margin-left: r(5px);
                }
            }
            .fans-num {
                width: r(194px);
                height: r(25px);
                font-size: r(23.08px);
                ul li {
                    float: left;
                    span {
                        color: red;
                    }
                    div {
                        position: relative;
                        width: r(88px);
                        height: r(25px);
                        padding-right: r(10px);
                        &::after {
                            content: "|";
                            position: absolute;
                            right: 0;
                        }
                    }
                    &:nth-of-type(2) {
                        margin-left: r(8px);
                    }
                }
            }
        }
        .user-botton {
            margin: r(5px) auto;
            width: r(460px);
            height: r(51px);
            div {
                width: r(218px);
                height: r(51px);
                border-radius: r(25px);
                text-align: center;
                line-height: r(51px);
                >p {
                    color: white;
                    font-size: r(23.08px);
                }
            }
            .shoucang {
                background: #b60005;
            }
            .fabu {
                background: #cdcdcd;
            }
        }
    }
}

.section-message {
    font-size: 0;
    background: #222222;
    width: r(640px);
    height: r(627px);
    .message-contain {
        font-size: r(23.08px);
        width: r(580px);
        height: r(627px);
        .title {
            width: r(580px);
            height: r(94px);
            border-bottom: r(2px) solid $user-font-color;
            >p {
                color: $user-font-color;
                margin-top: r(48px);
            }
        }
        .sg-introduce {
            width: r(430px);
            height: r(87px);
            border-bottom: r(2px) solid $user-font-color;
            text-align: center;
            line-height: r(87px);
            color: white;
            >p {
                font-size: r(21.31px);
            }
        }
        .new-message {
            width: r(430px);
            height: r(87px);
            text-align: center;
            line-height: r(87px);
            color: white;
            >p {
                font-size: r(21.31px);
            }
        }
        .wenzhang {
            width: r(580px);
            height: r(60px);
            border-bottom: r(2px) solid $user-font-color;
            >p {
                color: $user-font-color;
            }
        }
        .ziyuan {
            width: r(580px);
            height: r(90px);
            line-height: r(90px);
            border-bottom: r(2px) solid $user-font-color;
            >p {
                color: $user-font-color;
            }
        }
        .kecheng {
            line-height: r(90px);
            width: r(580px);
            height: r(90px);
            margin-bottom: r(23px);
            >p {
                color: $user-font-color;
            }
        }
        .button-exit {
            width: r(178px);
            height: r(51px);
            text-align: center;
            line-height: r(51px);
            background: #b60005;
            border-radius: r(25px);
            p {
                color: white;
            }
        }
    }
}

#toUser-btn {
    display: none;
}

#toUser-btn:checked+.wrap-user {
    transform: translateX(0%);
    transform: translate3d(0%, 0, 0);
}

.wrap-login {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #222222;
    top: 0;
    left: 0;
    transition: all 0.5s;
    transform: translateX(100%);
    
    .fanhui{
        width: r(50px);
        height: r(50px);
        .icon-fanhui {
        font-size: r(46px);
        color: white;
        position: absolute;
        top: r(20px);
        left: r(20px);
    }
    }
    
    .section-login {
        font-size: 0;
        position: relative;
        width: r(580px);
        height: 100%;
        .big-logo {
            position: absolute;
            width: r(161px);
            height: r(136px);
            left: r(580px)/2 - r(80px);
            top: r(196px);
            >img {
                width: r(161px);
                height: r(136px);
            }
        }
        .login-form {
            position: absolute;
            left: r(580px)/2 - r(246px);
            top: r(420px);
            width: r(492px);
            height: r(122px);
            margin-bottom: r(26px);
            .username,
            .password {
                width: r(492px);
                height: r(53px);
                >div {
                    width: r(61px);
                    height: r(53px);
                    text-align: center;
                    line-height: r(53px);
                    background: #303030;
                }
                input {
                    width: r(392px);
                    height: r(53px);
                    border: 0px;
                    outline: none;
                    background: #3d3d3d;
                    color: #cdcdcd;
                    padding-left: r(39px);
                }
                .iconfont {
                    font-size: r(42px);
                    color: white;
                }
            }
            .username {
                margin-bottom: r(16px);
            }
        }
        .forget-pwd{
            position: absolute;
            right: 0;
            margin-top: r(26px);
           
            color: white;
            font-size: r(19.53px);
        }
        .login-btn {
            width: r(492px);
            height: r(120px);
          
            position: absolute;
            left: r(580px)/2 - r(246px);
            top: r(626px);
            .login,.register{
                width: r(492px);
                height: r(53px);
                text-align: center;
                line-height: r(53px);
                color: #cdcdcd;
                >p{
                     font-size: r(23.08px);
                }
            }
            .login{
                background: #b60005;
                margin-bottom: r(14px);
            }
            .register{
                background: #303030;
            }
        }
    }
}

#toLogin-btn {
    display: none;
}

#toLogin-btn:checked+.wrap-login {
    transform: translateX(0%);
    transform: translate3d(0%, 0, 0);
}